<template>
  <div class='sort'>
    <div class="top-bar">
      <div class="mu-appbar mu-paper-1" color="primary" style="width: 100%;">
        <router-link to="/main/index"><i class="fa fa-chevron-left icon"></i></router-link>
        <div class="padding">
          <h1 class="top-title">“{{key}}”漫画</h1>
        </div>
        <mu-menu popover-class='sortMenu' cover placement="bottom-end" :open.sync="open">
          <div>
            {{curSort}}
            <i class="fa fa-angle-down icon"></i>
          </div>
          <mu-list slot="content" @change='onSort' :value='curSort'>
            <mu-list-item button value='人气' active-class='active'>
              <mu-list-item-title>人气</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button value='收藏' active-class='active'>
              <mu-list-item-title>收藏</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button value='更新' active-class='active'>
              <mu-list-item-title>更新</mu-list-item-title>
            </mu-list-item>
          </mu-list>
        </mu-menu>
        <i @click='openTypefun' class="fa fa-navicon icon area"></i>
      </div>
    </div>
    <div class="loadmore-wrap">
      <mu-container ref="container" class="loadmore-content">
        <mu-load-more @refresh="onRefresh" :refreshing="refreshing" :loaded-all='finished' :loading="loading" @load="onLoad">
          <!-- 显示当前的漫画列表 -->
          <div class="flex more">
            <div @click='toInfo(item.comic_id)' class='mh_item' v-for="item in mhlist" :key='item.id'>
              <div class='thumbnail'>
                <img onerror='this.src=/public/images/error.png' v-lazy="`${'https://image.mhxk.com/mh/'+item.comic_id+'.jpg-noresize.webp'}`"
                  :key="item.id">
                <div class='mh_des'>
                  <div class='text_sub'>{{item.last_chapter_name}}</div>
                </div>
              </div>
              <div class='mh_name text_sub'>{{item.comic_name}}</div>
            </div>
          </div>
        </mu-load-more>
        <div v-if="finished" class='finished'>已全部加载 </div>
      </mu-container>
    </div>
    <div class="mtype" :style="{left:(opentype?'0':'100%')}">
      <div class="flex flex-column mtypebox">
        <div class="mtypeItem flex flex-column" v-for="type in mType" :key="type.id">
          <div class="mtypeTitle">{{type.title}}</div>
          <div class="typebox flex">
            <div class='mtypeName' :class="{'active':item.title == key}" v-for="item in type.typeList" :key="item.id">
              <span @click='onType(item.href)'>{{item.title}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  @import './sort';

</style>
<script>
  export default {
    data() {
      return {
        curSort: "人气",
        key: '全部',
        sort: "click",
        searchKey: '',
        comic: '',
        page: 1,
        size: 30,
        mhlist: [],
        mType: [],
        refreshing: false,
        loading: false,
        open: false,
        finished: false,
        opentype: false
      };
    },
    methods: {
      toInfo(id) {
        this.$router.push('/main/comicInfo?comicId=' + id);
      },
      onType(type) {
        let comic = type.match(/\w*\./)[0].slice(0, -1);
        this.comic = comic;
        this.opentype = false;
        this.mhlist = [];
        // this.key = type.title;
        this.curSort = "人气";
        this.sort = "click";
        this.getMh();
      },
      openTypefun() {
        this.opentype = !this.opentype;
      },
      onSort(by) {
        this.open = false;
        switch (by) {
          case "收藏":
            this.curSort = "收藏";
            this.sort = "shoucang";
            break;
          case "更新":
            this.curSort = "更新";
            this.sort = "date";
            break;
          default:
            this.curSort = "人气";
            this.sort = "click";
            break;
        }
        this.page = 1;
        this.mhlist.length = 0;
        this.getMh();
      },
      // 刷新
      onRefresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        this.size = 30;
        this.page = 1;
        this.mhlist = [];
        this.getMh();
      },
      // 加载更多
      onLoad() {
        this.loading = true;
        this.page++;
        this.getMh();
      },
      // 获取数据
      getMh() {
        if (this.finished) return false;
        this.$progress.start();
        this.$http
          .get(
            `http://y.yuduo.top/index/Manhua/getMhType?by=${this.sort}&page=${this.page}&size=${this.size}&key=${this.searchkey}&comic=${this.comic}`
          )
          .then(res => {
            let result =
              res.status == 200 && res.data ? JSON.parse(res.data) : "";
            this.loading = false;
            this.refreshing = false;
            this.key = result.data.page.comic_sort || result.data.page.search_key || '全部';
            if (result.data.data.length > 0) {
              this.mhlist = this.mhlist.concat(result.data.data);
            } else {
              this.finished = true;
            }
            this.$progress.done();
          });
      }
    },
    mounted() {
      let comictype = this.$route.query.type;
      if (comictype) {
        this.onType(comictype);
        return;
      }
      let key = this.$route.query.key;
      this.searchkey = key || '';
      this.getMh();
      if (key) {
        this.key = key;
      }
      //获取漫画类型
      this.$http.get('http://y.yuduo.top/index/manhua/getMhTypeList').then(res => {
        let result = res.data;
        this.mType = result;
      })
    }
  };

</script>
